<template>
  <div class="list">
    <div>
      <MyRated />
      <MyMovieList
        @finish-get="addbs"
        ref="movie"
        :num="num"
        @finish="finish"
      />
      <p v-if="isShow">没有更多了</p>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import MyRated from "./MyRated.vue";
import MyMovieList from "./MyMovieList.vue";

let bs;

export default {
  data() {
    return {
      num: 1,
      isShow: false,
    };
  },

  components: {
    MyRated,
    MyMovieList,
  },

  methods: {
    addbs() {
      bs = new BetterScroll(".list", {
        scrollX: false,
        scrollY: true,
        click: true,
        // 允许我们可以监听拉到底的事件
        pullUpLoad: true,
      });
      bs.on("pullingUp", () => {
        console.log("我已经被拉到底了");
        // 在此处通知子组件去请求新的数据
        // this.$refs.movie.fn();
        this.num++;
      });
    },
    finish(fis) {
      // refresh()重新计算里面的高度，当里面的内容发生改变的时候
      bs.refresh();
      // finishPullUp()表示这一次已经结束了，可以允许做下一次的触底事件了
      if (!fis) {
        bs.finishPullUp();
      } else {
        this.isShow = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  position: fixed;
  top: 154px;
  bottom: 49px;
  overflow: hidden;
}
</style>
